<template>
    <div>
        <div class="readNum">
            <span class="readL">阅读（{{getData.articleInfo.readnum}}）</span>
            <span class="readR" @click="readRClick">
            <i class="readRSC" :class="readRSC? 'readRSCIcon' : '' "></i>
            <i class="readZan" :class="readZan? 'readZanIcon' : '' "></i>
            <i class="readJB" :class="readJB? '' : '' "></i>
            </span>
        </div>
        <div class="parcontent-comment">
            <div class="parComment-title">
                <span class="parTitle-t">我有话说</span> 
                <span class="parTitle-num">
                    <span>【{{getData.pageResult.total}}条评论|</span>
                    <span>99人参与】</span>
                </span>
            </div>
            <div class="parComment-input">
                <input type="text" placeholder="请输入评论..." v-model="commentValue" maxlength="500" @keyup ="commentValueLength">
                <input type="button" value="发表">
                <p class="fontLength">{{commentValueNum}}/500</p>
            </div>
        </div>
        <div class="commentList">
          <span class="commentListTitle">评论</span>
          <div class="commentListBox">
            <div class="parentList" v-for="(v, i) in getData.pageResult.dataList" :key="i" :data-id="v.id">
              <div class="parentListL">
                <img src="../../assets/banner.png" alt="">
              </div>
              <div class="parentListR">
                <div class="PRContent">
                  <div class="PRTitle">
                    <span class="username">{{v.mmiUsername}}</span>
                    <span class="date">{{v.mcTime}}</span>
                  </div>
                  <div class="PRContent">
                    <span>{{v.mcCont}}</span>
                    <span>全文</span>
                  </div>
                  <div class="PRButtom">
                    <span>回复</span>.
                    <span @click="PFContentSClick" v-if="PFContentShow">收起回复<i></i></span>
                    <span @click="PFContentSClick" v-else> {{v.replyList.length}}条回复<i></i></span>
                  </div>
                </div>
                <div class="PFContent" style="display:none" v-for="(v, i) in v.replyList" :key="i">
                  <div class="PFContentList">
                    <div class="PFListL">
                      <img src="../../assets/banner.png" alt="">
                    </div>
                    <div class="PFListR">
                      <div class="PFTitle">
                        <span class="username">诗与远方</span>
                        <span class="date">{{v.mcTime}}</span>
                      </div>
                      <div class="PFContent">
                        <span>{{v.mcCont}}</span>
                        <span>全文</span>
                      </div>
                      <div class="PFButtom">
                        <span>回复</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="comInput">
              <input type="text" placeholder="我也要说一句">
              <button>发表</button>
              <p>0/500</p>
            </div>
          </div>
        </div>
        <compIcon :compIconContent="compIconContent" v-if="compIconShow"></compIcon>
        <juBao v-if="JuBaoShow" @yesJuBao="yesJuBao" @NoJuBao="NoJuBao"></juBao>
    </div>
    
</template>

<script>
import compIcon from '@/components/public/compIcon'
import JuBao from '@/components/public/juBao' // 举报

export default {
  data () {
    return {
      commentValue: '',
      commentValueNum: 0,
      readRSC: false,
      readZan: false,
      readJB: false,
      PFContentShow: false,
      compIconContent: '',
      compIconShow: false,
      JuBaoShow: false,
      pageNum: 0,
      pages: 0
    }
  },
  props:['getData'],
  mounted: function () {
    this.pageNum = this.getData.pageResult.pageNum
    this.pages = this.getData.pageResult.pages
  },
  methods: {
    DataInit: function () {
      if (this.getData.articleInfo.ispraised === 1) {
        this.readRSC = true        
      }
      if (this.getData.articleInfo.iscolleciton === 1) {
        this.readZan = true        
      }
    },
    commentValueLength: function () {
      this.commentValueNum = this.commentValue.length
    },
    readRClick: function (event) {
      var elementClass = event.target.className
      if (elementClass.indexOf('readRSC') !== -1) {
         if (this.readRSC) {
           this.readRSC = false
           this.popContent('取消收藏')
         } else {
           this.readRSC = true
           this.popContent('收藏成功')              
         }
      } else if (elementClass.indexOf('readZan') !== -1) {
        if (this.readZan) {
           this.readZan = false
           this.popContent('取消点赞')
         } else {
           this.readZan = true
           this.popContent('点赞成功')                              
         }
      } else if (elementClass.indexOf('readJB') !== -1) {
        if (this.readJB === false) {
          this.readJB = true
          this.JuBaoShow = true         
        } else {
          this.readJB = false
        }
      }
    },
    popContent (value) {
      var that = this
      that.compIconContent = value
      that.compIconShow = true
      setTimeout (function () {
        that.compIconShow = false
      },3000)
  	},
    PFContentSClick: function (event) {
      var e = event.target.parentNode.parentNode.parentNode.children
      for (var i = 0; i < e.length; i++) {
        if (e[i].className === 'PFContent') {
          if (e[i].style.display === 'none') {
            e[i].style.display = 'block'         
          } else {
            e[i].style.display = 'none'
          }
        }
      }
      // if (this.PFContentShow) {
      //   this.PFContentShow = false
      // } else {
      //   this.PFContentShow = true       
      // }
    },
    yesJuBao: function () {
      this.JuBaoShow = false
    },
    NoJuBao: function () {
      this.JuBaoShow = false
      // this.readJB = false
    }
  },
  components: {
    'compIcon': compIcon,
    'juBao': JuBao
  }
}
</script>

<style>
    @import '../../../static/components/public/Contentcomment.css'
</style>
